/*
 * @Author: Setsuna
 * @Email: setsuna.xyz@qq.com
 * @FilePath: \src\pages\StatementOfAccount\StatementOfAccountRecord\index.tsx
 * @Date: 2022-03-14 13:59:39
 * @LastEditTime: 2022-04-06 14:21:53
 */

import { http, UdPage, UdPageHeader } from '@/lib'
import { Badge, Tabs } from 'antd'
import * as React from 'react'
import ConfirmedList from './Confirmed'
import NotBackList from './NotBack'
import UnconfirmedList from './Unconfirmed'
import apis from '@/apis/StatementOfAccount'
import './style.scss'

const { TabPane } = Tabs
export default class StatementOfAccountRecord extends React.PureComponent<any> {
  state = {
    activekey: '0',
    countOn: 0,
    countTh: 0,
    countTw: 0,
  }

  private callback = activekey => {
    this.setState({ activekey })
  }

  private getReconciliationCount = () => {
    http.get(apis.getReconciliationCount).then(res => {
      let { data: { countOn = 0, countTh = 0, countTw = 0 } = {} } = res
      this.setState({
        countOn,
        countTh,
        countTw,
      })
    })
  }

  componentDidMount() {
    this.getReconciliationCount()
  }

  render() {
    let { activekey, countOn, countTw, countTh } = this.state
    return (
      <UdPage className="list-page statementOfAccountRecord">
        <UdPageHeader title="对账函记录" />
        <Tabs defaultActiveKey="0" onChange={this.callback}>
          <TabPane
            tab={
              <Badge offset={[10, 0]} count={countOn}>
                未回函
              </Badge>
            }
            key="0"
          >
            {activekey === '0' && <NotBackList getReconciliationCount={this.getReconciliationCount} />}
          </TabPane>
          <TabPane
            tab={
              <Badge offset={[10, 0]} count={countTw}>
                财务未确认
              </Badge>
            }
            key="1"
          >
            {activekey === '1' && <UnconfirmedList getReconciliationCount={this.getReconciliationCount} />}
          </TabPane>
          <TabPane
            tab={
              <Badge offset={[10, 0]} count={countTh}>
                财务已确认
              </Badge>
            }
            key="2"
          >
            {activekey === '2' && <ConfirmedList getReconciliationCount={this.getReconciliationCount} />}
          </TabPane>
        </Tabs>
      </UdPage>
    )
  }
}
